<template>
        <div class="mui-content">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                            <li class="mui-table-view-cell">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">门票ID</h4>
                                        <span class="member_content">{{tickInfo.tick_id}}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">门票类型</h4>
                                        <span class="member_content">{{tickInfo.ticket_typename}}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">门票权限</h4>
                                        <span class="member_content">{{tickInfo.auth}}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">购票日期</h4>
                                        <span class="member_content">{{tickInfo.created_time | dataFormat }}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" v-show="tickInfo.ticket_typeid == 83">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">学校名称</h4>
                                        <span class="member_content">{{tickInfo.school }}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" v-show="tickInfo.ticket_typeid == 84">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">旅行社名称</h4>
                                        <span class="member_content">{{tickInfo.agency }}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" v-show="tickInfo.ticket_typeid == 84">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">导游姓名</h4>
                                        <span class="member_content">{{tickInfo.guide }}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" v-show="tickInfo.ticket_typeid == 83 || tickInfo.ticket_typeid == 84">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">人数</h4>
                                        <span class="member_content">{{tickInfo.people }}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" v-show="tickInfo.ticket_typeid == 85">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">车牌号</h4>
                                        <span class="member_content">{{tickInfo.car_number }}</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" v-show="tickInfo.ticket_typeid == 85">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-11">
                                        <h4 class="username">停车时长</h4>
                                        <span class="member_content">{{tickInfo.car_time }}小时</span>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-12">
                                        <mt-button class='button-align' type="danger" size="large" @click="hy">生成二维码</mt-button>

                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">

            <canvas id="msg" class="canvas-size"></canvas>
                    </div>
                </div>
            </div>
        </div>

</template>

<script>
    import QRCode from 'qrcode'

    export default {
        data(){
            return{
                isLogin:sessionStorage.getItem('token'),
                tickInfo:[],
            }
        },
        created(){
            this.getTickInfo();
        },
        methods:{
            getTickInfo(){
                this.$http.post('Tickinfo', {
                    account:this.isLogin
                } ).then(result => {
                    this.tickInfo = result.body;
                })
            },
            hy(){
                var msg= document.getElementById('msg');
                // 将获取到的数据（val）画到msg（canvas）上
                QRCode.toCanvas(msg, this.tickInfo.tick_id, function (error) {
                    console.log(error)
            })
            },
        },
    }
</script>

<style scoped>
    .mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
        margin-top: 0;
    }
    .mui-table h4{
        line-height: 21px;
        font-weight: 500;
    }

    .mui-table .oa-icon{
        position: absolute;
        right:0;
        bottom: 0;
    }
    .mui-table .oa-icon-star-filled{
        color:#f14e41;
    }
    .username{
        font-size:15px;
        font-weight: normal;
    }
    .mui-table-cell{
        display: flex;
        justify-content: space-between;
        margin:0;
    }
    .member_content{
        margin:0;
        padding: 0;
        font-size:15px;
        color: #666;
    }
    .list2{
        margin-top:10px;
    }
    .mui-badge{
        background-color: #ff402f;
        color:#fff;
        font-size:11px;
    }
    #msg{
        width:394px;
        height:394px;
    }
    .canvas-size{
        width:320px !important;
        height:320px !important;
        margin-left: 50%;
        position: relative;
        left: -160px;
    }
    .mui-content{
        background-color: #eee;
        overflow: hidden;
    }
    .button-align{
        align: center;
    }
</style>
